<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>


  <style>

    .el-container,#app,body,html,.el-tabs,.el-tab-pane {
      height: 100%;

    }
    .el-tabs__content{
      height:calc(100% - 60px);
    }
    .el-header {

      background-color: #79a207;
    }
    .el-aside {

      background-color: #AAAAAA;
    }
    .el-main {

      background-color: #dee2e6;
    }
    .el-footer {

      background-color: #79a207;
    }
    ::-webkit-scrollbar {
    //滚动条宽高，如果不需要显示滚动条可设置宽高为0
    width: 0px;
      height: 0px;
    }
    ::-webkit-scrollbar-thumb {
    //滚动条颜色和圆角
    background-color: #dbd9d9;
      border-radius: 3px;
    }

  </style>

  <script src="js/axios.min.js"></script>
  <script src="js/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id ="app">
  <el-scroll calss="searchDiv modifyDiv" style="height: 100%">
    <el-container>
      <el-header></el-header>
        <el-container>
          <el-aside width="300px" style="padding: 20px">
            <el-menu @select="chooseMenu"
                   v-bind:default-active="currentTab"
                    class="el-menu-vertical-demo">
              <el-menu-item index="userTab">
                  <i class="el-icon-user-solid"></i>
                  <span>用户管理</span>
                </el-menu-item>
              </el-submenu>
              <el-menu-item index="goodsTab">
                <i class="el-icon-menu"></i>
                <span slot="title">商品管理</span>
              </el-menu-item>
              <el-menu-item index="orderTab" >
                <i class="el-icon-tickets"></i>
                <span slot="title">订单管理</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-container>
            <el-main>
              <el-tabs type="border-card" v-model="currentTab"  >
              <el-tab-pane  v-for= "t in tabs" :label="t.label" :name="t.name">
                <iframe :src="t.url" style="height: 100%;width: 100%;border: 0px;"></iframe>
              </el-tab-pane>
            </el-tabs></el-main>
            <el-footer></el-footer>
          </el-container>
        </el-container>
    </el-container>
  </el-scroll>
</div>

<script>
  var v = new Vue({
    el:"#app",
    data:{
      currentTab:"",
      pages:{
        userTab:{label:'用户管理',url:'userManage.htm'},
        goodsTab:{label:'商品管理',url:'booksManage.htm'},
        orderTab:{label:'订单管理',url:'backOrder.htm'},
      },
      tabs:[]
    },
    methods:{
      chooseMenu(index,indexPath){
        this.currentTab=index;
        //查询当前tabs是否已经打开该index
        for(let t of this.tabs){
          if(t.name== index){
            return;
          }
        }
        //获取page对象
        let page = this.pages[index];
        //构建tab对象
        let tab = { name:index, url : page.url,label:page.label};
        //将tab对象添加到tabs[]中
        this.tabs.push(tab);
      }
    }
  })
</script>

</body>
</html>